<template>
  <el-dialog
    v-model="dialogVisible"
    title="采购单详情"
    width="900px"
    :before-close="handleClose"
    class="PurchaseOrderDetail"
  >
    <el-form :model="detail" label-width="120px" class="PurchaseOrderDetail-form" disabled>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="订单编号">
            <el-input :model-value="detail.orderNo" class="PurchaseOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商">
            <el-input :model-value="detail.supplierName" class="PurchaseOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="下单日期">
            <el-input :model-value="detail.orderDate" class="PurchaseOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input :model-value="detail.note || '-'" class="PurchaseOrderDetail-form-input"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="detail.items || []" border stripe class="PurchaseOrderDetail-table">
      <el-table-column type="index" label="序号" width="60" align="center"/>
      <el-table-column prop="code" label="商品编码" min-width="120" align="center"/>
      <el-table-column prop="name" label="商品名称" min-width="160" align="center"/>
      <el-table-column prop="unit" label="单位" width="100" align="center"/>
      <el-table-column prop="quantity" label="数量" width="120" align="center"/>
      <el-table-column prop="unitPrice" label="单价(¥)" width="120" align="center">
        <template #default="{row}">{{ formatMoney(row.unitPrice) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="小计(¥)" width="140" align="center">
        <template #default="{row}">{{ formatMoney(row.totalPrice) }}</template>
      </el-table-column>
    </el-table>

    <div class="PurchaseOrderDetail-summary">
      <div class="PurchaseOrderDetail-summary-row">
        <div class="PurchaseOrderDetail-summary-label">合计金额：</div>
        <div class="PurchaseOrderDetail-summary-value">¥ {{ formatMoney(detail.totalAmount) }}</div>
      </div>
    </div>

    <template #footer>
      <div class="PurchaseOrderDetail-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {getPurchaseOrder} from '../../../../api/purchaseOrderApi.js'

const props = defineProps({
  visible: {type: Boolean, default: false},
  orderId: {type: Number, default: null}
})
const emits = defineEmits(['update:visible'])

const dialogVisible = ref(false)
const detail = reactive({})

watch(() => props.visible, (v) => {
  dialogVisible.value = v
  if (v && props.orderId) {
    loadDetail()
  }
})
watch(dialogVisible, (v) => { if (!v) emits('update:visible', false) })

const loadDetail = async () => {
  try {
    const res = await getPurchaseOrder(props.orderId)
    Object.assign(detail, res || {})
  } catch (e) {
    ElMessage.error('获取详情失败')
  }
}

const handleClose = () => { dialogVisible.value = false }
const formatMoney = (v) => Number(v || 0).toFixed(2)
</script>

<style scoped lang="scss">
.PurchaseOrderDetail {
  &-form { padding:16px 0; &-input { width:100%; }}
  &-table { width:100%; margin-top:8px; }
  &-summary { display:flex; justify-content:flex-end; padding:16px 0; &-row {display:flex; gap:8px; align-items:center;} &-label{font-size:14px;color:#606266;} &-value{font-size:16px;font-weight:600;color:#303133;} }
  &-footer { display:flex; justify-content:flex-end; gap:8px; }
}
</style>
